<template>
  <div class="app-container">
    <el-card>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="案例图片" class="cover" prop="mgExamplePicList">
          <oss v-model="pic" ossURL="/oss/uploadPicExample"></oss>
        </el-form-item>

        <el-form-item label="专业领域" prop="professionalField">
          <el-input v-model="form.professionalField" placeholder="请输入专业领域" />
        </el-form-item>

        <el-form-item label="服务类别" prop="serviceType">
          <el-input v-model="form.serviceType" placeholder="请输入服务类别" />
        </el-form-item>

        <el-form-item label="发表期刊" prop="journals">
          <el-input v-model="form.journals" placeholder="请输入发表期刊" />
        </el-form-item>
        <el-form-item label="期刊分区" prop="journalsClass">
          <el-input v-model="form.journalsClass" placeholder="请输入期刊分区" />
        </el-form-item>

        <el-form-item label="发表时间" prop="publishTime">
          <el-date-picker v-model="form.publishTime" style="width: 320px" type="date" align="right"
            value-format="timestamp" placeholder="发表时间"></el-date-picker>
        </el-form-item>

        <el-form-item label="论文作者" prop="author">
          <el-input v-model="form.author" placeholder="请输入作者" />
        </el-form-item>

        <el-form-item label="论文链接" prop="link">
          <el-input v-model="form.link" placeholder="请输入论文标题超链接" />
        </el-form-item>

        <el-form-item label="论文标题" prop="article">
          <el-input v-model="form.article" placeholder="请输入论文标题" />
        </el-form-item>
        <el-form-item label="显示排序" prop="sort">
          <el-input type="number" v-model="form.sort" placeholder="请输入排序" />
        </el-form-item>
        <el-form-item label="状态" prop="enabled">
          <el-switch v-model="form.enabled" :active-value="1" :inactive-value="0">
          </el-switch>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import rules from '@/rules/example'
import { JOURNALS_CLASS_LABEL } from '@/constant/const'
import { addExample } from '@/api/frist/example'
export default {
  components: { oss: () => import('@/components/ImageUpload/oss.vue') },
  data() {
    return {
      form: {
        enabled: 1,
      },
      rules: rules,
      pic: undefined,
      publishTime: undefined,
      mgExamplePicList: [],
      journals: JOURNALS_CLASS_LABEL,

    }
  },
  methods: {


    /** 提交按钮 */
    submitForm() {
      let result = [];
      let picArray = this.pic ? this.pic.split(',') : []

      for (let i = 0; i < picArray.length; i++) {
        result[i] = {
          pic: picArray[i],
          exampleId: this.form.id
        }
      }


      this.form.publishTime = this.form.publishTime ? this.form.publishTime / 1000 : null;

      this.form.mgExamplePicList = result;


      this.$refs['form'].validate((valid) => {
        if (!valid) {
          return
        }
        addExample(this.form).then((response) => {
          this.$modal.msgSuccess('新增成功')
          this.$router.push({ path: '/example/index' })
        })
      })
    },

    cancel() {
      this.$router.replace({
        path: '/example/index?a=' + new Date().getTime()
      })
    }
  }
}
</script>

<style scoped>
.cover>>>.el-upload-dragger {
  width: 150px;
  height: 150px;
}
</style>
